@use "theme/globals" as *;

:host {
    --height: var(--core-navigation-max-height, 44px);
    --background: var(--core-navigation-background);
    --button-color: var(--gray-700);

    height: var(--height);
    width: 100%;
    background-color: var(--background);
    display: block;
    border-top: 1px solid var(--stroke);

    core-loading {
        text-align: center;
        --loading-inline-min-height: var(--height);
        --loading-placeholder-padding: 8px;
    }

    &.empty {
        display: none;
    }

    .core-course-module-navigation-arrow {
        ion-button {
            margin: 0;
            --border-radius: 0;
            width: 100%;
            font: var(--mdl-typography-body-font-sm);
            --color: var(--button-color);

            .button-text {
                width:100%;
            }

            ion-icon {
                font-size: var(--mdl-typography-body-fontSize-sm);
            }
        }
        .core-course-previous-module {
            text-align: start;
        }
        .core-course-next-module {
            text-align: end;
        }
    }
}

:host-context(core-course-format.core-course-format-singleactivity) {
    opacity: 0 !important;
    height: 0 !important;
}

:host-context(:root.dark) {
    --button-color: var(--gray-100);
}
